<template>
    <div class="edu-page-warp">
        <el-card
            v-if="user.userType === '1'"
            shadow="never"
            body-style="padding: 24px; margin-bottom: -14px;"
        >
            <div class="edu-detail-title">
                <span class="check-sign">辅修微专业培养方案审批</span>
                <!-- <div class="check-title">
                    <span>申请编号：</span>
                    {{ rollInfo.no }}
                </div> -->
                <div>
                    <el-button class="return-btn" @click="returnCheckList">返回</el-button>
                </div>
            </div>
        </el-card>
        <el-card
            v-if="user.userType === '2'"
            shadow="never"
            body-style="padding: 24px; margin-bottom: -14px;"
        >
            <div class="edu-detail-title">
                <span class="check-sign">辅修微专业培养方案审批</span>
                <!-- <div class="check-title">
                    <span>申请编号：</span>
                    {{ rollInfo.no }}
                </div> -->
                <div>
                    <el-button class="return-btn" @click="returnCheckList">返回</el-button>
                </div>
            </div>
        </el-card>
        <el-card
            v-if="user.userType === '3'"
            shadow="never"
            body-style="padding: 24px; margin-bottom: -14px;"
        >
            <div class="edu-detail-title">
                <span class="check-sign">辅修微专业培养方案审批</span>
                <!-- <div class="check-title">
                    <span>申请编号：</span>
                    {{ rollInfo.no }}
                </div> -->
                <div>
                    <el-button class="return-btn" @click="returnCheckList">返回</el-button>
                </div>
            </div>
        </el-card>
        <el-card shadow="never" body-style="padding: 24px;">
            <el-row v-if="rollInfo.content" :gutter="20" class="edu-info-list">
                <el-col>
                    <div class="item-group">
                        <label class="secondary-text label" v-if="rollInfo.wfType!=18">方案详情：</label>
                        <table style="width:100%;">
                            <tr>
                                <td width="198px" style="text-align: right;">方案名称：</td>
                                <td width="325px">
                                    <a @click="previewCulture(rollInfo.content)">{{rollInfo.content.name}}</a>
                                </td>
                                <td width="198px" style="text-align: right;">辅修年级：</td>
                                <td width="325px">
                                    <span>{{rollInfo.content.grade}}</span>
                                </td>
                            </tr>
                            <tr>
                                <td width="198px" style="text-align: right;">{{$t('minor.major.college')}}：</td>
                                <td width="325px">
                                    <span>{{rollInfo.content.faculty}}</span>
                                </td>
                                <td width="198px" style="text-align: right;">辅修专业：</td>
                                <td width="325px">
                                    <span>{{rollInfo.content.major}}</span>
                                </td>
                            </tr>
                            <!-- <tr>
                                <td width="198px" style="text-align: right;">进阶层次</td>
                                <td colspan="3">
                                    <span width="100%">{{rollInfo.content.advencedLevel}}</span>
                                </td>
                            </tr> -->
                        </table>
                    </div>
                </el-col>
            </el-row>
            <el-row v-if="rollInfo.content" :gutter="20" class="edu-info-list">
                <div v-if="rollInfo.wfType!=19" class="item-group">
                    <div class="display-inline-block">
                        <!--培养计划-->
                        <culturePlanTemplate
                            v-if="rollInfo.wfType == 62"
                            :content="rollInfo.content"
                        />
                    </div>
                </div>
            </el-row>
            <el-row
                v-if="rollInfo.content&&rollInfo.wfType!=18 && rollInfo.wfType!=62 &&rollInfo.wfType!=19"
                :gutter="20"
                class="edu-info-list"
            >
                <el-col>
                    <div class="item-group">
                        <label class="secondary-text label">审批材料：</label>
                        <el-button
                            v-for="(item, index) in rollInfo.content.evidenceList"
                            :key="index"
                            type="text"
                            @click="handleGetFile(item)"
                        >{{ item.substr(10) }}</el-button>
                    </div>
                </el-col>
                <!-- <el-col>
                    <div class="item-group">
                        <label class="secondary-text label">修改说明：</label>
                        <span class="majoy-text span">
                            <span>{{ rollInfo.content.editRemark }}</span>
                        </span>
                    </div>
                </el-col> -->
            </el-row>
            <div class="hr"></div>
            <el-row
                v-if="rollInfo.content && rollInfo.isNeedOaNum"
                :gutter="20"
                class="edu-info-list"
            >
                <el-col>
                    <div class="item-group" style="width: 100%">
                        <label class="secondary-text label">OA单号：</label>
                        <div class="display-inline-block" style="width: 50%">
                            <span class="majoy-text" style="width: 100%">
                                <el-input
                                    v-model="approvalInfo.oaNo"
                                    :disabled="rollInfo.result != 'Process'"
                                    placeholder="请输入单号"
                                    style="width: 100%;"
                                />
                            </span>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row v-if="rollInfo.content" :gutter="20" class="edu-info-list">
                <el-col>
                    <div class="item-group" style="width: 100%">
                        <label class="secondary-text label">审批说明：</label>
                        <div class="display-inline-block" style="width: 50%">
                            <span class="majoy-text" style="width: 100%">
                                <el-input
                                    v-if="rollInfo.wfType != 14&&rollInfo.wfType != 21"
                                    :rows="3"
                                    v-model="approvalInfo.content"
                                    :disabled="rollInfo.result != 'Process'"
                                    type="textarea"
                                    placeholder="请输入内容"
                                    style="width: 100%;min-height: 80px;"
                                    maxlength="500"
                                />
                                <el-input
                                    v-if="rollInfo.wfType == 14||rollInfo.wfType == 21"
                                    :rows="3"
                                    v-model="approvalInfo.remark"
                                    :disabled="rollInfo.result != 'Process'"
                                    type="textarea"
                                    placeholder="请输入内容"
                                    style="width: 100%;min-height: 80px;"
                                    maxlength="500"
                                />
                            </span>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row
                v-if="rollInfo.content && rollInfo.wfType!=19"
                :gutter="20"
                class="edu-info-list"
            >
                <el-col>
                    <div class="item-group" style="width: 100%">
                        <label class="secondary-text label">证明材料：</label>
                        <div class="display-inline-block">
                            <el-upload
                                :headers="{'X-Token': $store.state.session.sessionid}"
                                :data="{bucketname: 'face', folderpath: 'file'}"
                                :on-preview="handleAvatarPreview"
                                :on-remove="handleAvatarRemove"
                                :on-success="handleAvatarSuccess"
                                :disabled="rollInfo.result != 'Process'"
                                :before-upload="beforeUpload"
                                class="upload-demo"
                                action="/api/commonservice/obsfile/uploadfile"
                                multiple
                            >
                                <el-button
                                    :disabled="rollInfo.result != 'Process'"
                                    size="small"
                                    type="primary"
                                >点击上传</el-button>
                                <span slot="tip" class="el-upload__tip" style="margin-left:10px">只能上传jpg / png格式的文件, 且单个文件不超过5M</span>
                            </el-upload>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div class="edu-opertion-bar">
                <div class="float-right">
                    <el-button
                        :disabled="rollInfo.result != 'Process'"
                        type="danger"
                        @click="submiteReject"
                    >驳回</el-button>
                    <el-button
                        :disabled="rollInfo.result != 'Process'"
                        type="primary"
                        @click="submiteThrough"
                    >通过</el-button>
                </div>
            </div>
             <div>
                    <!-- 审批进度 -->
                <h1 class="base-info-title">{{$t('approval_progress')}}</h1>
                <el-table
                    stripe
                    :data="rollInfo.listApproveHistory"
                >
                    <el-table-column :label="$t('index_title')" type="index" width="50"></el-table-column>
                    <el-table-column :label="$t('applicant_time')"  width="180" show-overflow-tooltip>
                        <template slot-scope="scope">{{ scope.row.time | formatDate }}</template>
                    </el-table-column>
                    <el-table-column :label="$t('approver_label')" min-width="150" show-overflow-tooltip>
                        <template slot-scope="props">
                            {{props.row.approvorName}}({{props.row.approvorId}})
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('department_label')" prop="faculty" width="130" show-overflow-tooltip></el-table-column>                    
                    <el-table-column :label="$t('approval_result')" width="100">
                        <template slot-scope="props">
                            <el-tag
                                type="success"
                                size="mini"
                                v-if="props.row.result == 'End'"
                            >{{$t('message.pass')}}</el-tag>
                            <el-tag
                                type="danger"
                                size="mini"
                                v-if="props.row.result == 'Reject'"
                            >{{$t('message.reject')}}</el-tag>
                            <el-tag
                                type="success"
                                size="mini"
                                v-if="props.row.result == 'Process'"
                            >{{$t('message.pass')}}</el-tag>
                            <el-tag
                                type="info"
                                size="mini"
                                v-if="props.row.result == 'COMMIT'"
                            >{{$t('message.submit')}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="content"
                        label="审批说明"
                        width="150"
                    />
                    <el-table-column
                        prop="fileInfo"
                        label="审批材料"
                        min-width="250"
                        >
                        <template slot-scope="scope">
                            <div v-if="scope.row.fileInfo">
                            <el-button
                                v-for="item in scope.row.fileInfo.approveAttachment"
                                :key="item"
                                type="text"
                                @click="handleGetFile(item)"
                                style="display:block;margin-left:10px"
                            >{{ item }}</el-button>
                            <!-- <span>{{scope.row.fileInfo}}</span> -->
                            </div>
                        </template>
                    </el-table-column>
                    <div slot="empty">
                        <div class="empty_img_container">
                            <img src="/static/images/faceIdentify/u26.png" alt />
                        </div>
                    </div>
                </el-table>
            </div>
        </el-card>
    </div>
</template>
<script>
import { mapActions } from "vuex";
import { findUserInfoByIdType, findLocalUserById } from "common/src/api/user";
import {
    selectApproFlow,
    approvalThrough,
    approvalReject
} from "common/src/api/approval";
import { downloadfile } from "common/src/api/upload";
import filters from "common/src/filters";
export default {
    name: "student-roll-detail",
    props: ["publicInfo"],
    filters: {
        formatDate(date) {
            return filters.formatDate(date, "yyyy/MM/dd hh:mm:ss");
        }
    },
    data() {
        return {
            rollInfo: {},
            user: {},
            id: "",
            approvalInfo: {
                no: "",
                content: "",
                oaNo: "",
                approveAttachment: [],
                remark: null
            },
            dataProcess: [] //数据列表传参
        };
    },
    created() {
        this.id = this.$route.query.id;
        if (this.publicInfo && this.publicInfo.no) {
            this.id = this.publicInfo.no;
        }
        this.initPage(this.id);
    },
    methods: {
        ...mapActions(["delTab"]),
        _init_(user) {
            const query = "userId=" + user.uid + "&type=" + user.type;
            findUserInfoByIdType(query).then(res => {
                if (res.code === 200 && res.data) {
                    res.data.userType = user.type;
                    this.user = res.data;
                }
            });
        },
        _initLocalUser(uid) {
            findLocalUserById("userId=" + uid).then(res => {
                if (res.code === 200 && res.data) {
                    this.user = res.data;
                    this.user.name = res.data.userName;
                }
            });
        },
        initPage(id) {
            selectApproFlow(id).then(res => {
                if (res && res.data) {
                    const _user = {
                        uid: res.data.applicantId,
                        type: res.data.userType ? res.data.userType : "2"
                    };

                    if (res.data.userType === "3") {
                        this._initLocalUser(_user.uid);
                    } else {
                        this._init_(_user);
                    }

                    this.approvalInfo.no = res.data.no;
                    res.data.content = JSON.parse(res.data.content);
                    _.forEach(res.data.listApproveHistory, function(item, key) {
                        if(item.fileInfo){
                            item.fileInfo = JSON.parse(item.fileInfo);
                        }
                        if (key == 0) {
                            item.fileInfo = {
                                approveAttachment: res.data.content.evidenceList || []
                            }
                        }
                    });
                    this.rollInfo = res.data || {};
                    if (this.publicInfo && this.publicInfo.no) {
                        this.rollInfo.result = this.publicInfo.result;
                    }
                }
            });
        },
        handleAvatarPreview() {},
        handleAvatarRemove(file, fileList) {
            const removeFile = file.response.data[file.name].objectkey;
            _.remove(this.approvalInfo.approveAttachment, function(item) {
                return item === removeFile;
            });
        },
        handleAvatarSuccess(response, file, fileList) {
            if (response && response.data) {
                this.approvalInfo.approveAttachment.push(
                    response.data[file.name].objectkey
                );
            }
        },
        submiteThrough() {
            approvalThrough(this.approvalInfo).then(res => {
                if (res && res.code == 200) {
                    this.$message({
                        type: "success",
                        message: '审批成功'
                    });
                    if (this.rollInfo.wfType == 61 || this.rollInfo.wfType == 62) {
                        this.returnCheckList();
                    }
                }
            });
        },
        submiteReject() {
            let data = _.cloneDeep(this.approvalInfo);
            approvalReject(data).then(res => {
                if (res && res.code == 200) {
                    this.$message({
                        type: "success",
                        message: '审批成功'
                    });
                    if (this.rollInfo.wfType == 61 || this.rollInfo.wfType == 62) {
                        this.returnCheckList();
                    }
                }
            });
        },
        handleGetFile(objectkey) {
            if (!objectkey) return;

            downloadfile(objectkey);
        },
        //返回审核列表
        returnCheckList() {
            if (this.publicInfo) {
                this.$parent.showRollDetail && this.$parent.showRollDetail();
            }else {
                this.$router.push("/cultureSchemeCheck");
            }
        },
        beforeUpload(file) {
            //上传附件的校验
            let requireFile = [
                "jpg",
                "png",
                "JPG",
                "PNG"
            ];
            const fileFormate =
                requireFile.indexOf(
                    file.name.split(".")[file.name.split(".").length - 1]
                ) > -1;
            const isLt5M = file.size / 1024 / 1024 <= 5; //图片大小不超过5MB
            if (!fileFormate) {
                this.$message({
                    message: this.$t("minor.approve.uploadFileError"),
                    type: "warning"
                });
                return false;
            }
            if (!isLt5M) {
                this.$message({
                    message: this.$t("上传文件大小不能超过 5M"),
                    type: "warning"
                });
                return false;
            }
            if (!(fileFormate && isLt5M)) {
                return false;
            }
        },
        previewCulture(row) {
            row = row || {};
            if (!row.cultureId) {
                return;
            }
            this.$router.push({
                name: 'minorCultureSchemeView',
                params: {
                    id: row.cultureId,
                    title: row.name,
                    currentPath: `${this.$route.path}?id=${this.rollInfo.no}`
                }

            })
        }
    },
    watch: {
        $route() {
            this.id = this.$route.query.id;
            this.initPage(this.id);
        }
    }
};
</script>

<style lang="scss" scoped>
.check-sign {
    font-size: 18px;
    font-weight: 500;
    float: left;
    font-family: 微软雅黑;
}
.check-title {
    font-family: 微软雅黑;
    float: left;
    font-size: 18px;
    padding: 0 0 0 25px;
    font-weight: 500;
}
.edu-info-list .item-group .label {
    width: 100px;
}
.return-btn {
    float: right;
}
table {
    border: 4px solid #d2d4d6;
    border-collapse: collapse;
    font-size: 14px;
    font-family: 微软雅黑;
}
tr td {
    border: 1px solid #d2d4d6;
    line-height: 32px;
}
</style>

